<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件的嵌套</title>
    <script type="text/javascript" src="../vue.js"></script>
</head>

<body>
<!-- 准备好 一个容器-->
<div id="root">
 <app></app>
</div>

</body>


<script type="text/javascript">

    Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示。

    //student组件
    const student = Vue.extend({
        template:'<div>' +
            '<h2>学生姓名: {{name}}</h2>' +
            '<h2>学生年龄: {{age}}</h2>' +
            '</div>',
        data(){
            return{
                name:'itshumm',
                age:18
            }
        }
    })


    //school组件
    const school = Vue.extend({
        template:'<div>' +
            '<h2>学校名称: {{name}}</h2>' +
            '<h2>学校地址: {{address}}</h2>' +
            '<student></student>' +
            '</div>',
        //注册在哪里的组件就在谁的结构里写标签
        data(){
            return{
                name:'hfuu',
                address:'繁华大道'
            }
        },
        //注册组件（局部），进行组件的嵌套
        components:{
            student,
        }
    })

    //定义hello组件
    const hello = Vue.extend({
        template:'<h1>{{msg}}</h1>',
        "data"(){
            return{
                msg:'欢迎你来学习'
            }
        }
    })

    //定义app组件
    const app = Vue.extend({
        template:'<div>' +
            '    <hello></hello>\n' +
            '    <school></school>' +
            '</div>',
        components:{
            school,
            hello
        }
    })

    Vue.component('School',school)

    //创建vm
    new Vue({
        el: '#root',
        //注册组件(局部)
        components:{app}
    })


</script>

</html>
